<!-- 
	数据加载过程
	<c-loading :loading-state="loadingState"></c-loading>
-->
<template>
	<view class="loading">
		<view v-if="props.loadingState.loading" class="loading-icon">
			<view class="loader-18 f-blue"></view>
		</view>
		<view v-if="props.loadingState.default" class="loading-default">
			<view class="loading-icon">
				<view class="loader-18 f-blue"></view>
			</view>
			<view class="loading-text">数据加载中</view>
		</view>
		<view v-if="props.loadingState.stop" class="loading-text">没有数据了...</view>
		<view v-if="props.loadingState.pullup" class="loading-text">上拉加载更多</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		loadingState: {
			type: Object,
			default: () => ({
				loading: false, // 加载中，只有图标
				default: false, // 加载中，有图标和文字
				stop: false, // 加载完所有数据，没有下一页了
				pullup: false, // 还有下一页可加载
			}),
		},
	})
</script>

<style lang="less" scoped>
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading-default {
		padding: 30rpx;

		.loading-icon {
			padding-bottom: 0;
		}
	}

	.loading-text {
		padding: 10rpx 0 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}

	/* loading */
	.loading-icon {
		width: 30px;
		height: 30px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		vertical-align: top;
		-webkit-transition: .3s color, .3s border;
		transition: .3s color, .3s border;
	}

	.loader-18 {
		position: relative;
		display: inline-block;
		width: 20px;
		height: 20px;
		vertical-align: middle;
		pointer-events: none;
	}

	.loader-18:before,
	.loader-18:after {
		content: '';
		display: block;
		position: absolute;
		border-radius: 50%;
		border: 2px solid transparent;
		border-bottom-color: currentcolor;
		top: 0;
		left: 0;
		-webkit-animation: 1s loader-18 linear infinite;
		animation: 1s loader-18 linear infinite;
	}

	.loader-18:before {
		width: 16px;
		height: 16px;
		left: 2px;
		top: 2px;
	}

	.loader-18:after {
		width: 20px;
		height: 20px;
		// top: .1em;
		// left: .1em;
		-webkit-animation-direction: reverse;
		animation-direction: reverse;
	}

	@-webkit-keyframes loader-18 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes loader-18 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
</style>